<script setup lang="ts">
import { UserType } from '@/app/api/api';
import { computed } from 'vue';
import { userTypeColor, userTypeReadable } from '../models/userTypeDisplay';

const props = defineProps<{
    userType?: UserType
}>()
const text = computed<string>(()=>{
    return userTypeReadable(props.userType)
})
const color = computed<string>(()=>{
    return userTypeColor(props.userType)
})
</script>

<template>
<div :style="{color}"><b>{{ text }}</b></div>
</template>